import React from 'react';
import { Table, Input, Space, Card, Typography, Button } from 'antd';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';

const { Title } = Typography;

function CommonTable({
  title,
  columns,
  dataSource,
  loading,
  rowKey,
  onAdd,
  searchFields = [],
  extraContent,
}) {
  const [searchText, setSearchText] = React.useState('');

  const filteredData = (dataSource || []).filter(item =>
    searchFields.some(field =>
      (item[field] ?? '').toString().toLowerCase().includes(searchText.toLowerCase())
    )
  );

  return (
    <Card
      style={{
        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
        borderRadius: '8px',
      }}
    >
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Title level={2} style={{ margin: 0, fontSize: '24px' }}>{title}</Title>
          <Space>
            {onAdd && (
              <Button
                type="primary"
                icon={<PlusOutlined />}
                onClick={onAdd}
                style={{ fontSize: '16px' }}
              >
                新增
              </Button>
            )}
            <Input
              placeholder={`搜索${title}...`}
              prefix={<SearchOutlined />}
              onChange={e => setSearchText(e.target.value)}
              style={{ width: 300, fontSize: '16px' }}
              allowClear
            />
          </Space>
        </div>
        {extraContent}
        <Table
          columns={columns}
          dataSource={filteredData}
          rowKey={rowKey}
          loading={loading}
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条记录`,
            locale: {
              items_per_page: '条/页',
              jump_to: '跳至',
              jump_to_confirm: '确定',
              page: '页',
              prev_page: '上一页',
              next_page: '下一页',
              prev_5: '向前 5 页',
              next_5: '向后 5 页',
              prev_3: '向前 3 页',
              next_3: '向后 3 页',
            }
          }}
          scroll={{ x: 'max-content' }}
          style={{
            borderRadius: '8px',
            overflow: 'hidden',
            fontSize: '16px',
          }}
        />
      </Space>
    </Card>
  );
}

export default CommonTable; 